<template>
  <div class="container">
    <SearchForm
      ref="searchForm"
      :checking-status-options="checkingStatusOptions"
      :payment-stage-options="paymentStageOptions"
      @submitQuery="submitQueryHandle"
    />
    <el-card style="margin-top: 12px;">
      <BaseTable
        ref="baseTable"
        :table-data="tableData"
        :table-list="tableList"
        :total="total"
        :loading="tableDataLoading"
        show-index
        show-pagination
        @pagination="paginationHandle"
      >
        <el-table-column
          fixed="right"
          label="操作"
          width="86px"
        >
          <template v-slot="scope">
            <el-button v-if="hasPermission(roles, 'f05_01')" type="text" @click="jumpToHandle1(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </BaseTable>
    </el-card>
  </div>
</template>
<script>
import SearchForm from './components/SearchForm'
import BaseTable from '@/components/BaseTable'
import { listQuery } from '@/service/remittance'
import { getStatusText, formatTime, toFixedHandle, hasPermission } from '@/utils/tools'
import { mapGetters } from 'vuex'

export default {
  name: 'RemittanceList',
  components: {
    SearchForm,
    BaseTable
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tableDataLoading: false,
      tableList: [
        {
          label: '回款编号',
          prop: 'paymentPlanOrderNo',
          type: 'el-link',
          handleClick: this.jumpToHandle1,
          permission: 'f05_01'
        },
        {
          label: '所属订单',
          prop: 'orderNo'
        },
        {
          label: '所属PI',
          prop: 'piNo'
        },
        {
          label: '所属发货申请',
          prop: 'deliveryApplyNo',
          type: 'el-link',
          handleClick: this.jumpToHandle2,
          permission: 'f01_01'
        },
        {
          label: '客户',
          prop: 'companyNameForeign',
          type: 'el-link',
          handleClick: this.jumpToHandle3,
          permission: 'f04_01'
        },
        {
          label: '销售',
          prop: 'saleName'
        },
        {
          label: '应收金额',
          prop: 'paymentAmount',
          render: (node, data) => {
            const { row, column: { prop }} = data
            return <span>{`${row.currencyCode} ${toFixedHandle(row[prop])}`}</span>
          }
        },
        {
          label: '已核账金额',
          prop: 'paymentAmountCheck',
          render: (node, data) => {
            const { row, column: { prop }} = data
            return <span>{`${row.currencyCode} ${toFixedHandle(row[prop])}`}</span>
          }
        },
        {
          label: '回款阶段',
          prop: 'paymentStage',
          render: (node, data) => {
            const { row, column: { prop }} = data
            const text = getStatusText(row[prop], this.paymentStageOptions)
            return <span>{{ text }}</span>
          }
        },
        {
          label: '核账状态',
          prop: 'checkingStatus',
          render: (node, data) => {
            const { row, column: { prop }} = data
            const text = getStatusText(row[prop], this.checkingStatusOptions)
            return <span>{{ text }}</span>
          }
        },
        {
          label: '创建时间',
          prop: 'createTime',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            return <span>{formatTime(row[prop])}</span>
          }
        },
        {
          label: '核账时间',
          prop: 'auditTime',
          width: 150,
          render: (node, data) => {
            const { row, column: { prop }} = data
            return <span>{formatTime(row[prop])}</span>
          }
        }
      ],
      checkingStatusOptions: [], // 核账状态
      paymentStageOptions: [] // 回款阶段
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  created() {
    this.initOptionsData('checking_status', 'checkingStatusOptions')
    this.initOptionsData('payment_stage', 'paymentStageOptions')
  },
  mounted() {

  },
  methods: {
    hasPermission,
    // 跳转至详情
    jumpToHandle1(row) {
      this.$router.push({
        path: '/remittance/remittanceDetail',
        query: {
          id: row.id || ''
        }
      })
    },
    // 跳转至发货详情
    jumpToHandle2(row) {
      if (window.__POWERED_BY_QIANKUN__) {
        row.deliveryApplyId &&
          window.open(
            `/fina-admin/applicationForm/shipDetail/${row.deliveryApplyId}`
          )
      } else {
        row.deliveryApplyId &&
          window.open(`/applicationForm/shipDetail/${row.deliveryApplyId}`)
      }
    },
    // 跳转至客户
    jumpToHandle3(row) {
      if (window.__POWERED_BY_QIANKUN__) {
        row.companyId &&
          window.open(
            `/fina-admin/clientAccountManagement/accountDetail/${row.companyId}`
          )
      } else {
        row.companyId &&
          window.open(`/clientAccountManagement/accountDetail/${row.companyId}`)
      }
    },
    paginationHandle(data) {
      this.listQuery(this.$refs.searchForm.getSearchData())
    },
    initOptionsData(type, optionName) {
      this.$store.dispatch('base/getBaseDataList', { type }).then(res => {
        this[optionName] = res
      })
    },
    // 查询列表
    async listQuery(param) {
      const res = await listQuery({
        ...param,
        pageNum: this.$refs.baseTable.pageIndex,
        pageSize: this.$refs.baseTable.pageSize
      }).finally(() => {
        this.tableDataLoading = false
      })
      const { records = [], total = 0 } = res
      this.tableData = records
      this.total = total
    },
    submitQueryHandle(value) {
      this.$refs.baseTable.pageIndex = 1
      this.$refs.baseTable.pageSize = 10
      this.tableDataLoading = true
      this.listQuery(value)
    }
  }
}
</script>
<style lang="scss" scoped>
  .container {
    margin: 12px;
    width: calc(100% - 24px);
  }
</style>
